<template>
  <div>
    <video ref="videoPlayer" class="video-js"></video>
  </div>
</template>

<script>
import { handleClick, handleView } from "@/api/interaction.js";
export default {
  props: {
    options: {
      type: Object,
      default() {
        return {};
      },
    },
    mediaId: {
      type: String,
    },
    mediaUuid: {
      type: String,
    },
    uuid: {
      type: String,
    },
  },
  data() {
    return {
      player: null,
      ip: null,
      // 限制，播放时长超过该值时才有机会记录播放量
      recordLengthLimit: 10,
    };
  },
  mounted() {
    // 需要在index.html中导入sohu js
    this.ip = returnCitySN["cip"];
    let self = this;
    this.player = this.$video(
      this.$refs.videoPlayer,
      this.options,
      function onPlayerReady() {
        let data = {
          mediaId: self.mediaId,
          mediaType: 0,
          mediaUuid: self.mediaUuid,
          uuid: self.uuid,
          ip: self.ip,
        };
        handleClick(data);
      }
    );
  },
  methods: {
    viewHandler() {
      let length = 0;
      let played = this.player.played();
      for (let i = 0; i < played.length; i++) {
        length += played.end(i) - played.start(i);
      }
      if (length > this.recordLengthLimit) {
        let data = {
          mediaId: this.mediaId,
          mediaType: 0,
          mediaUuid: this.mediaUuid,
          uuid: this.uuid,
          ip: this.ip,
        };
        console.log(data)
        handleView(data);
      }
    }
  },
  beforeDestroy() {
    if (this.player) {
     this.viewHandler();
      // let length = 0;
      // let played = this.player.played();
      // for (let i = 0; i < played.length; i++) {
      //   length += played.end(i) - played.start(i);
      // }
      // if (length > this.recordLengthLimit) {
      //   let data = {
      //     mediaId: this.mediaId,
      //     mediaType: 0,
      //     mediaUuid: this.mediaUuid,
      //     uuid: this.uuid,
      //     ip: this.ip,
      //   };
      //   handleView(data);
      // }
      this.player.dispose();
    }
  },
};
</script>

<style lang="scss" scoped>
</style>